<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	customStyle?: any;
	bordered?: boolean;
	bodyStyle?: any;
}

const props = withDefaults(defineProps<Props>(), {
	bordered: false
});

const classNames = computed(() => {
	return {
		'x-card': true,
		'x-card-bordered': props.bordered
	};
});
</script>

<template>
	<view :class="classNames" :style="customStyle">
		<view class="content">
			<slot name="cover"></slot>
			<view class="body" :style="bodyStyle">
				<slot></slot>
			</view>
		</view>
		<x-divider v-if="$slots.footer" :height="4"></x-divider>
		<slot name="footer"></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-card {
	background-color: #fff;
	border-radius: 10rpx;

	.content {
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
		padding: 24rpx;
	}

	&-bordered {
		border: 1px solid #e5e5e5;
	}
}
</style>
